<template>
  <el-form :model="form" label-width="120px">
    <el-row :gutter="20">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">老人基本信息</span>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input v-model="form.name" readonly></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="档案号">
          <el-input v-model="form.userNum" readonly></el-input>
        </el-form-item>
      </el-col>

      <el-form-item>
        <div class="select-older-button">
          <el-button type="primary" @click="putawayVisible = true"
            >选择老人</el-button
          >
        </div>
      </el-form-item>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender" readonly>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="年龄">
          <el-input v-model="form.age" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择老人生日"
            value-format="yyyy-MM-dd"
            readonly
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身份证号">
          <el-input v-model="form.identity" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="现住地址">
          <el-cascader
            placeholder="请选择"
            v-model="form.currentAddress"
            :options="addressOptions"
            clearable
            filterable
            @change="handleAddressChange"
            readonly
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="详细地址">
          <el-input v-model="form.address" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="监护人">
          <el-input v-model="form.emergencyContact" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="监护人电话">
          <el-input v-model="form.emergencyTel" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="担保人">
          <el-input v-model="form.emergencyContact2" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="担保人电话2">
          <el-input v-model="form.emergencyTel2" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">登记信息</span>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="服务类型">
          <el-select v-model="form.projectId" placeholder="请选择">
            <el-option
              v-for="project in projects"
              :key="project.value"
              :label="project.label"
              :value="project.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="护理类型">
          <el-select v-model="form.nursingId" placeholder="请选择">
            <el-option
              v-for="nursing in nursings"
              :key="nursing.value"
              :label="nursing.label"
              :value="nursing.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="护工">
          <el-select v-model="form.porterId" placeholder="请选择">
            <el-option
              v-for="porter in porters"
              :key="porter.value"
              :label="porter.label"
              :value="porter.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任护士">
          <el-select v-model="form.nurseId" placeholder="请选择">
            <el-option
              v-for="nurse in nurses"
              :key="nurse.value"
              :label="nurse.label"
              :value="nurse.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="主管医师">
          <el-select v-model="form.docterId" placeholder="请选择">
            <el-option
              v-for="docter in docters"
              :key="docter.value"
              :label="docter.label"
              :value="docter.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="区域/室/床">
          <el-cascader
            placeholder="请选择"
            v-model="form.currentArea"
            :options="areaOptions"
            clearable
            filterable
            @change="handleAreaChange"
          ></el-cascader>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-form-item label="入院诊断">
          <el-input type="textarea" :rows="4" placeholder="请输入" v-model="form.admissionDiagnosis"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-form-item label="入住原因">
          <el-input type="textarea" :rows="4" placeholder="请输入" v-model="form.reasonForIn"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <div class="urgent-message">
        <div class="blue-vertical-line"></div>
        <span class="message-text">缴费信息</span>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="付费方式">
          <el-select v-model="form.economicSources" placeholder="请选择">
            <el-option
              v-for="payStatus in payStatuss"
              :key="payStatus.id"
              :label="payStatus.name"
              :value="payStatus.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="预存金额">
          <el-input v-model="form.saveMoney"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <div>
    <el-button type="primary" @click="back">返回</el-button>
    </div>
      <div class="right-align">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form-item>
    <el-dialog
      :visible.sync="putawayVisible"
      title="选择老人"
      :append-to-body="true"
    >
      <el-row :gutter="20">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="userNum" label="档案编号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.gender === 0 ? "女" : "男" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="createTime" label="建档时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="selectOlder(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="12">
          <!-- 放分页部分 -->
          <el-pagination
            background
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next"
            @next-click="nextPage"
            @prev-click="prevPage"
            @size-change="sizeChange"
            @current-change="currentPage"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </el-form>
</template>
  
  <script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      payStatuss: [
        { id: "0", name: "自费" },
        { id: "1", name: "城乡职工医疗险" },
        { id: "2", name: "城乡居民医疗险" },
        { id: "3", name: "公费医疗照顾对象" },
        { id: "4", name: "公务员补助" },
        { id: "5", name: "其他" },
      ],
      tableData: [],
      putawayVisible: false,
      areas: [],
      docters: [],
      nurses: [],
      porters: [],
      nursings: [],
      projects: [],
      form: {
        name: "",
        gender: 1,
        age: "",
        birthday: "",
        identity: "",
        tel: "",
        currentAddress: [],
        address: "",
        education: "",
        nationid: "",
        nativeplace: "",
        maritalstatus: "",
        socialStatus: "",
        socialCard: "",
        economicSources: "",
        payStatus: "",
        emergencyContact: "",
        emergencyContact2: "",
        emergencyTel: "",
        emergencyTel2: "",
        currentArea: [],
        saveMoney: 0,
        projectId: "",
        nursingId: "",
        porterId: "",
        nurseId: "",
        docterId: "",
        areaId: "",
        roomId: "",
        bedId: "",
        admissionDiagnosis:"",
        reasonForIn:""
      },
      addressOptions: [
        {
          value: "省份ID",
          label: "省份名称",
          children: [
            {
              value: "城市ID",
              label: "城市名称",
              children: [
                {
                  value: "县区ID",
                  label: "县区名称",
                },
                // 更多县区...
              ],
            },
            // 更多城市...
          ],
        },
        // 更多省份...
      ],
      nations: [],
      areaOptions: [
        {
          value: "区域ID",
          label: "区域名称",
          children: [
            {
              value: "房间ID",
              label: "房间名称",
              children: [
                {
                  value: "床位ID",
                  label: "床位名称",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    back(){
      this.$router.push({ path: "/userin" });
    },
    selectOlder(val) {
      val.economicSources = val.economicSources.toString();
      this.form = {};
      this.form = val;
      if (!Array.isArray(val.currentAddress)) {
        this.form.currentAddress = val.currentAddress
          .split(", ")
          .map(function (item) {
            return parseInt(item, 10); // 第二个参数为进制基数，10代表十进制
          });
      }

      this.putawayVisible = false;
    },
    queryRegisters() {
      this.$axios.get("api/user/queryRegisters").then((res) => {
        this.projects = res.data.data.projects.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        this.nursings = res.data.data.nursings.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        this.porters = res.data.data.porters.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        this.nurses = res.data.data.nurses.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
        this.docters = res.data.data.docters.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      });
    },
    queryRegister() {
      this.$axios
        .get("api/user/queryRegister")
        .then((res) => {
          this.areaOptions = res.data.data; // 将获取到的数据赋值给 areaOptions
        })
        .catch((error) => {
          console.error("Error fetching register data: ", error);
        });
    },
    queryOlder() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      let orderParam = {};
      orderParam.status = 0;
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = orderParam;
      this.$axios.post("api/userArc/queryUser", pageParam).then((res) => {
        if (res.data.code == 200) {
          let pageData = res.data.data;

          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    submitForm() {
      this.form.areaId = this.form.currentArea[0];
      this.form.roomId = this.form.currentArea[1];
      this.form.bedId = this.form.currentArea[2];

      let user = this.form;
      if (typeof this.form.currentAddress != "string") {
        const currentAddress = this.form.currentAddress;
        const currentAddressStr = currentAddress.join(", ");
        this.form.currentAddress = currentAddressStr;
      }

      this.$axios.post("api/user/addUserIn", user).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功!");
          this.$router.push({ path: "/userin" });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    queryNation() {
      this.$axios.get("api/nation/queryNation").then((res) => {
        if (res.data.code == 200) {
          this.nations = res.data.data;
        }
      });
    },

    getLocations() {
      this.$axios.get("api/location/queryLocation").then((response) => {
        function removeChildrenForCounties(options) {
          for (const option of options) {
            if (option.children) {
              // 如果children是一个空数组，删除它
              if (option.children.length === 0) {
                delete option.children;
              }
              // 否则，递归处理下一级的选项
              else {
                removeChildrenForCounties(option.children);
              }
            }
          }
        }

        this.addressOptions = response.data.data;
        removeChildrenForCounties(this.addressOptions);
      });
    },
    handleAddressChange(value) {
      this.form.currentAddress = value;
    },
    handleAreaChange(value) {
      this.form.currentArea = value;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryUser();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryUser();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryUser();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryUser();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryUser();
    },
  },
  created() {
    this.queryRegister();
    this.getLocations();
    this.queryNation();
    this.queryRegisters();
    this.queryOlder();
  },
};
</script>
  
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.avatar {
  width: 120px; /* 调整为你需要的宽度 */
  height: 120px; /* 调整为你需要的高度 */
  object-fit: cover; /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
}
.urgent-message {
  background-color: #cfe8ff; /* 淡蓝色背景 */
  color: #1890ff; /* 蓝色字体颜色 */
  padding: 10px;
  border: 1px solid #91d5ff; /* 淡蓝色边框 */
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.info-icon {
  color: #1890ff; /* 蓝色图标颜色 */
  margin-right: 10px;
}

.message-text {
  font-weight: bold; /* 加粗字体 */
}

.right-align {
  text-align: right; /* 将内容右对齐 */
}

.blue-vertical-line {
  border-left: 3px solid blue; /* 设置竖线宽度和颜色 */
  height: 15px; /* 设置竖线高度，根据你的需要调整 */
  margin-right: 10px; /* 可选：设置竖线右边距，根据你的需要调整 */
}

.select-older-button {
  text-align: left; /* 将按钮左对齐 */
}
</style>